<template>
  <div>
    <el-tag class="mt-10" type="success">活动通道</el-tag>
    <ul class="fz12" style="line-height: 2;border-top:1px solid #ccc;">
      <li><span>联系地址：</span>{{ fu.area }}</li>
      <li><span>详细地址：</span>{{ fu.address }}</li>
      <li><span>商户邮箱号：</span>{{ fu.login_email }}</li>
      <li><span>商户手机号：</span>{{ fu.login_phone }}</li>
      <li><span>结算周期：</span>{{ fu.balance_type }}</li>
      <li><span>支付功能：</span><span v-for="item in fu.need_channel" :key="item">
        {{ item === 1 ? '支付宝扫码支付，' : item === 2 ? '支付宝条码支付，' : item === 3 ? '支付宝一码多付，' : item === 17 ? '支付宝固定二维码，' : item === 56 ? '微信（绿洲计划）条码支付，' : item === 55 ? '微信（绿洲计划）扫码支付，' : item === 57 ? '微信（绿洲计划）公众号支付，' : item === 58 ? '微信（绿洲计划）小程序支付，' : '' }}
        </span>
      </li>
      <li><span>上传图片：</span><img @click="handleClickZoomImg(fu.ch_fumin_canyin_plat)" title="餐饮平台入驻证明截图" v-if="fu.ch_fumin_canyin_plat" :src="fu.ch_fumin_canyin_plat" width="100" height="100"></li>
      <li>
        <h4 style="margin: 0 0 0 -20px">微信通道</h4>
      </li>
      <li><span>开通绿洲：</span>{{ fu.is_green ? '是' : '否' }}</li>
      <li v-if="fu.green"><span>签约费率：</span>{{ fu.wx_rate }} %</li>
      <li v-if="fu.green"><span>经营类别：</span>{{ fu.wx_category }}</li>
      <li v-if="fu.green">
        <img @click="handleClickZoomImg(fu.ch_fumin_canyin_appoint)" title="指定餐饮平台照片" v-if="fu.ch_fumin_canyin_appoint" :src="fu.ch_fumin_canyin_appoint" width="100" height="100">
        <img @click="handleClickZoomImg(fu.ch_fumin_face)" title="BD与商户门头合照" v-if="fu.ch_fumin_face" :src="fu.ch_fumin_face" width="100" height="100">
        <img @click="handleClickZoomImg(fu.ch_fumin_activity)" title="BD与店内活动物料合照" v-if="fu.ch_fumin_activity" :src="fu.ch_fumin_activity" width="100" height="100">
        <img @click="handleClickZoomImg(fu.ch_fumin_green_counter)" title="收银台照片" v-if="fu.ch_fumin_green_counter" :src="fu.ch_fumin_green_counter" width="100" height="100">
      </li>
      <li><h4 style="margin: 0 0 0 -20px">支付宝通道</h4></li>
      <li><span>开通蓝海：</span>{{ fu.is_blue ? '是' : '否' }}</li>
      <li v-if="fu.is_blue"><span>签约费率：</span>{{ fu.ali_rate }} %</li>
      <li v-if="fu.is_blue"><span>经营类别：</span>{{ fu.ali_category }}</li>
      <li v-if="fu.is_blue"><span>蓝海图片：</span><img @click="handleClickZoomImg(fu.ch_fumin_blue_counter)" title="收银台照片" v-if="fu.ch_fumin_blue_counter" :src="fu.ch_fumin_blue_counter" width="100" height="100"></li>
    </ul>
  </div>
</template>

<script>
import { merchantChannelFuActivityQuery } from '@/api/shop'

export default {
  data() {
    return {
      fu: {
        area: [],
        address: '',
        login_phone: '',
        login_email: '',
        wx_category: '',
        wx_rate: 0,
        ali_rate: 0,
        ali_category: '',
        balance_type: '',
        is_green: false,
        is_blue: false,
        ch_fumin_face: '',
        ch_fumin_activity: '',
        ch_fumin_canyin_plat: '',
        ch_fumin_green_counter: '',
        ch_fumin_blue_counter: '',
        ch_fumin_canyin_appoint: '',
        need_channel: []
      }
    }
  },
  methods: {
    handleDocumentInit() {
      merchantChannelFuActivityQuery(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.$emit('updateShow', ['activity', true])
          res.data.result.is_green === 0 ? this.fu.is_green = false : this.fu.is_green = true
          res.data.result.is_blue === 0 ? this.fu.is_blue = false : this.fu.is_blue = true
          this.fu.area = res.data.result.area.name.toString().replace(/\,/g, '-')
          this.fu.address = res.data.result.address
          this.fu.login_email = res.data.result.login_email
          this.fu.login_phone = res.data.result.login_phone
          this.fu.balance_type = res.data.result.balance_type
          this.fu.need_channel = res.data.result.need_channel
          this.fu.wx_rate = Number(res.data.result.wx_rate)
          this.fu.ali_rate = Number(res.data.result.ali_rate)
          this.fu.wx_category = res.data.result.wx_category.name
          this.fu.ali_category = res.data.result.ali_category.name
          this.fu.ch_fumin_face = res.data.result.photos.ch_fumin_face
          this.fu.ch_fumin_activity = res.data.result.photos.ch_fumin_activity
          this.fu.ch_fumin_blue_counter = res.data.result.photos.ch_fumin_activity
          this.fu.ch_fumin_green_counter = res.data.result.photos.ch_fumin_activity
          this.fu.ch_fumin_canyin_plat = res.data.result.photos.ch_fumin_canyin_plat
          this.fu.ch_fumin_canyin_appoint = res.data.result.photos.ch_fumin_canyin_appoint
        }
      })
    },
    handleClickZoomImg(url) {
      this.$alert(`<img width="100%" heigth="100%" src= ${url}></img>`, {
        dangerouslyUseHTMLString: true,
        center: true,
        showConfirmButton: false,
        closeOnClickModal: true,
        closeOnPressEscape: true
      }).then(() => {
        return false
      }).catch(() => {
        return false
      })
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>
